import Taro from '@tarojs/taro-rn';
import * as tslib_1 from "tslib";
import React from 'react';
import { Component } from "@tarojs/taro-rn";
import { View, Input, Picker, Image, Text, Form, Button } from "@tarojs/components-rn";
import PageFooterInfo from "../../components/PageFooterInfo";
import PickerArea from "../../components/PickerArea";
import { getRuntime, typeOfInsuranceArr, projectTypeArr, projectDate } from "../../utils/common";
import { inject, observer } from "@tarojs/mobx-rn";
import page1StyleSheet from "./page1_styles";
import right from '../../assets/img/right.png';
import point_on from '../../assets/img/icon_23.png';
import line_on from '../../assets/img/icon_24.png';
import point from '../../assets/img/icon_25.png';
import line from '../../assets/img/icon_26.png';
var _styleSheet = page1StyleSheet;
let Page1StepTwo = class Page1StepTwo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      typeOfInsuranceArr: typeOfInsuranceArr,
      typeOfInsurance: '',
      companyName: '',
      amount: null,
      countryOrArea: '',
      enterpriseSituation: '',
      projectTypeArr: projectTypeArr,
      projectType: '',
      constructionPeriodArr: projectDate,
      constructionPeriod: '',
      enterpriseQualification: '',
      loading: false,
      disabled: false,
      submitText: '立即计算'
    };
  }
  componentWillMount() {
    Taro.setNavigationBarTitle({ title: '工程保函中心' });
  }
  handelRouter(url = '/pages/index/index') {
    getRuntime().navigateTo(url);
  }
  onChangePicker(type, e) {
    this.setState({
      [type]: this.state[type + 'Arr'][e.detail.value]
    });
  }
  pickerArea(res) {
    this.setState({
      countryOrArea: res.province.label + res.city.label + res.distract.label
    });
  }
  submit(e) {
    let { typeOfInsurance, countryOrArea, projectType, constructionPeriod } = this.state;
    let { companyName, amount, enterpriseSituation, enterpriseQualification } = e.detail.value;
    if (!typeOfInsurance) {
      getRuntime().showToast('请选择险种~');
      return;
    }
    //if(!countryOrArea) { getRuntime().showToast('请选择国家/地区~'); return }
    //if(!projectType) { getRuntime().showToast('请选择项目类型~'); return }
    //if(!constructionPeriod) { getRuntime().showToast('请选择工期~'); return }
    //if(!companyName) { getRuntime().showToast('请填写公司全称~'); return }
    if (!amount) {
      getRuntime().showToast('请填写金额~');
      return;
    }
    //if(!enterpriseSituation) { getRuntime().showToast('请填写企业情况~'); return }
    //if(!enterpriseQualification) { getRuntime().showToast('请填写企业资质~'); return }
    let { FinancialCenterStore } = this.props.stores;
    FinancialCenterStore.saveInfoAndCalculationMoney({
      form: {
        typeOfInsurance,
        companyName,
        amount,
        countryOrArea,
        enterpriseSituation,
        projectType,
        constructionPeriod,
        enterpriseQualification
      },
      callback: res => {
        if (res.bfAmountOfMoney && res.freeAmountOfMoney) {
          // 缓存数据第三步使用
          getRuntime().setStorage('projectInsurance', res);
          getRuntime().navigateTo(`/pages/finance/page1_step_two?bfAmountOfMoney=${res.bfAmountOfMoney}&freeAmountOfMoney=${res.freeAmountOfMoney}`);
        }
      }
    });
  }
  render() {
    let { typeOfInsuranceArr, typeOfInsurance, projectTypeArr, projectType, constructionPeriodArr, constructionPeriod } = this.state;
    return <View style={_styleSheet["from-wrap"]}>
          <View style={_styleSheet["step-line"]}>
            <View style={_styleSheet["step-icon"]}>
              <Image src={point_on} style={_styleSheet["point"]} />
              <Image src={line_on} style={_styleSheet["line"]} />
              <Image src={point} style={_styleSheet["point"]} />
              <Image src={line} style={_styleSheet["line"]} />
              <Image src={point} style={_styleSheet["point"]} />
            </View>
            <View style={_styleSheet["step-content"]}>
              <Text style={_styleSheet["title"]}>保费计算</Text>
              <Text style={_styleSheet["title"]}>提交资料</Text>
              <Text style={_styleSheet["title"]}>预约办理</Text>
            </View>
          </View>
        <Form onSubmit={this.submit.bind(this)}>
            <View style={[_styleSheet["item-group"], _styleSheet["pt0"], _styleSheet["pb0"]]}>
              <View style={_styleSheet["input-group"]}>
                <View style={_styleSheet["input-name"]}>选择险种</View>
                <Picker mode="selector" range={typeOfInsuranceArr} onChange={this.onChangePicker.bind(this, 'typeOfInsurance')} style={_styleSheet["input-picker"]}>
                  <View style={_styleSheet["tt"]}>
                    {!typeOfInsurance && <View style={[_styleSheet["from-input"], _styleSheet["picker-con"], _styleSheet["placeholder-class"]]}>点击选择</View>}
                    {typeOfInsurance && <View style={[_styleSheet["from-input"], _styleSheet["picker-con"]]}>{typeOfInsurance}</View>}
                    <Image src={right} style={_styleSheet["drop-down-icon"]} />
                  </View>
                </Picker>
              </View>

              <View style={_styleSheet["input-group"]}>
                <View style={_styleSheet["input-name"]}>公司全称</View>
                <Input name="companyName" placeholderClass="placeholder_class" placeholder="请填写公司全称" style={_styleSheet["from-input"]} />
              </View>

              <View style={_styleSheet["input-group"]}>
                <View style={_styleSheet["input-name"]}>金额(元)</View>
                <Input name="amount" type="number" placeholderClass="placeholder_class" placeholder="请填写保证金金额" style={_styleSheet["from-input"]} />
              </View>

              <View style={_styleSheet["input-group"]}>
                <View style={_styleSheet["input-name"]}>国家/地区</View>
                <PickerArea onPicketArea={this.pickerArea.bind(this)} />
              </View>

              <View style={_styleSheet["input-group"]}>
                <View style={_styleSheet["input-name"]}>企业情况</View>
                <Input name="enterpriseSituation" placeholderClass="placeholder_class" placeholder="请填写企业情况" style={_styleSheet["from-input"]} />
              </View>

              <View style={_styleSheet["input-group"]}>
                <View style={_styleSheet["input-name"]}>项目类型</View>
                <Picker mode="selector" range={projectTypeArr} onChange={this.onChangePicker.bind(this, 'projectType')} style={_styleSheet["input-picker"]}>
                  <View style={_styleSheet["tt"]}>
                    {!projectType && <View style={[_styleSheet["from-input"], _styleSheet["picker-con"], _styleSheet["placeholder-class"]]}>点击选择</View>}
                    {projectType && <View style={[_styleSheet["from-input"], _styleSheet["picker-con"]]}>{projectType}</View>}
                    <Image src={right} style={_styleSheet["drop-down-icon"]} />
                  </View>
                </Picker>
              </View>

              <View style={_styleSheet["input-group"]}>
                <View style={_styleSheet["input-name"]}>工期</View>
                <Picker mode="selector" range={constructionPeriodArr} onChange={this.onChangePicker.bind(this, 'constructionPeriod')} style={_styleSheet["input-picker"]}>
                  <View style={_styleSheet["tt"]}>
                    {!constructionPeriod && <View style={[_styleSheet["from-input"], _styleSheet["picker-con"], _styleSheet["placeholder-class"]]}>点击选择</View>}
                    {constructionPeriod && <View style={[_styleSheet["from-input"], _styleSheet["picker-con"]]}>{constructionPeriod}</View>}
                    <Image src={right} style={_styleSheet["drop-down-icon"]} />
                  </View>
                </Picker>
              </View>

              <View style={_styleSheet["input-group"]}>
                <View style={_styleSheet["input-name"]}>企业资质</View>
                <Input name="enterpriseQualification" placeholderClass="placeholder_class" placeholder="请填写企业资质" style={_styleSheet["from-input"]} />
              </View>
              <Button formType="submit" style={_styleSheet["page-submit"]}>立即计算</Button>
            </View>
        </Form>

        <PageFooterInfo />
      </View>;
  }
};
Page1StepTwo = tslib_1.__decorate([inject("stores"), observer], Page1StepTwo);
export default Page1StepTwo;